<template>
  <div style="padding: 8px">
    <el-page-header @back="$router.back()" content="详情页面"/>

    <div class="ke__bgfff ke__margin ke__padding">

      <k-form :data="form" @submit="onFormSubmit" class="ke__margin" label-width="100px">
        <k-form-item label="分类" prop="cate_id" :validate="['required']">
          <el-select v-model="form.cate_id">
            <el-option v-for="cate in cates" :key="cate.id" :label="cate.name" :value="cate.id"/>
          </el-select>
        </k-form-item>

        <k-form-item label="文章标题" prop="title" :validate="['required']">
          <el-input v-model="form.title"/>
        </k-form-item>

        <k-form-item label="作者">
          <el-input v-model="form.nickname" placeholder="留空则默认使用站点名称"/>
        </k-form-item>

        <k-form-item label="简介" prop="summary" :validate="['required']">
          <el-input v-model="form.summary" placeholder="请填写长度在255内的文章简介"
                    type="textarea" rows="4"/>
        </k-form-item>

        <k-form-item label="内容" prop="content" :validate="['required']" class="no-line-height">
          <k-editor v-model="form.content" :image="uploadImageOptions"/>
        </k-form-item>

        <k-form-item label="置顶文章">
          <el-switch v-model="form.is_top"/>

          <span class="ke__tip ke__margin-left">置顶后会一直显示在新闻列表顶部</span>
        </k-form-item>

        <k-form-item>
          <el-button type="primary" native-type="submit" :loading="subing">保存</el-button>
        </k-form-item>
      </k-form>
    </div>
  </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
import { getHeaders, baseUrl } from '@/library/http'
import KEditor from '@/components/editor'
@Component({
  components: {
    KEditor
  }
})
export default class NewsForm extends Vue {
  cates = []
  form = {}
  subing = false

  get uploadImageOptions() {
    return {
      action: `${baseUrl}/admin/upload/image`,
      headers: getHeaders()
    }
  }

  // 初始化
  mounted () {
    this.$http.get('admin/news/category')
      .then((result) => {
        this.cates = result.list
      })
    if (this.$route.query.id !== '0') {
      this.getRead(this.$route.query.id)
    }
  }

  // 路由更新
  beforeRouteUpdate (to, from, next) {
    if (to.query.id !== from.query.id) {
      this.getRead(to.query.id)
    }
    next()
  }

  // 获取文章信息
  getRead (id) {
    this.loading = true
    this.$http.get(`admin/news/${id}`)
      .finally(() => this.loading = false)
      .then((result) => {
        if (result.res_code === 0) {
          this.form = result.data
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }

  // 表单提交
  onFormSubmit () {
    this.subing = true
    this.$http.post('admin/news', this.form)
      .finally(() => this.subing = false)
      .then((result) => {
        if (result.res_code === 0) {
          this.$router.replace({
            query: {
              ...this.$route.query,
              id: result.data.id
            }
          })
          this.form = result.data
          this.$message.success('保存成功')
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }
}
</script>

<style scoped lang="scss">
  .no-line-height {
    /deep/ .el-form-item__label {
      margin-top: 10px;
    }
    /deep/ .el-form-item__content, /deep/ .el-form-item__label {
      line-height: normal !important;
    }
  }
</style>
